<template>
	<view class="container tn-safe-area-inset-bottom tn-flex tn-flex-direction-column">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF00">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <!-- 图标logo -->
        <view class="custom-nav__back">
          <view class="custom-nav__back__logo spin">
            <view class="custom-nav__back__logo__image"></view>
          </view>
        </view>
        <!-- 搜索框 -->
        <view class="custom-nav__search">
          <view class="custom-nav__search__box">
            <tn-input class="custom-nav__search__box__input" v-model="query.title" borderColor="#000" placeholderStyle="color: #000" placeholder="搜搜更有趣" :border="true" :height="50" :showRightIcon="true" rightIcon="search" @keyup.enter="handleEnterKey"  @blur="handleEnterKey"></tn-input>
          </view>
        </view>
      </view>
    </tn-nav-bar>
    
    <view class="tn-width-full">
      <swiper class="cx-top-banner cx-top-banner-list" :circular="true"
        :autoplay="true" duration="500" interval="30000">
        <swiper-item v-for="(item,index) in bannerList" :key="index">
          <view class="item image">
            <image :src="item.picture" mode="aspectFill"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    
    <view class="cx-list tn-bg-white">
      <view class="tn-flex tn-flex-row-between tn-padding-top-lg">
        <view class="tn-flex-3 tn-padding tn-margin-left-sm">
          <view class="tn-flex">
            <view class="tn-flex tn-flex-row-center tn-flex-col-center">
              <view class="tn-padding-right tn-text-ellipsis tn-text-left">
                <view class="tn-padding-right tn-color-black tn-text-bold tn-text-xxl">
                  {{ phraseList.name || '' }}
                </view>
                <view class="tn-padding-right tn-padding-top tn-text-df">
                  {{ phraseList.content || '' }}
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <view class="tn-flex-1 justify-content-item tn-padding tn-text-center">
          <view class="">
            <text class="tn-icon-qr-code" style="font-size: 70rpx;"></text>
          </view>
          <view class=" tn-padding-top-xs">
            探 索
          </view>
        </view>
      </view>
      
      <view class="tn-padding-left-xs tn-padding-right">
        <tn-tabs :list="categoryList" name="title" :current="current" activeColor="#000" :bold="true" @change="changeCategory" backgroundColor="#FFFFFF99" :height="100"></tn-tabs>
      </view>
    
      <!-- 图文 -->
      <view class="tn-flex tn-flex-direction-column">
        <cx-demand-list :query="query" :list="list"></cx-demand-list>
      </view>
    </view>
  
    <view class="tn-tabbar-height"></view>
	</view>
</template>

<script>
  import base from '@/common/mixin/base.js'
  import request from '@/common/request.js';
  import CxDemandList from "@/component/cx-demand-list/index.vue";
  
	export default {
    name: 'DemandList',
    mixins: [base],
    components:{
    	CxDemandList,
    },
		data() {
			return {
				model: 'business/demand',
				query: {
				  category_id: '',
				  title: '',
				  page: 1,
				  limit: 4,
				},
        bannerList: [],
				phraseList: {},
        categoryList: [{id: '', title: '全部'}],
        list: [],
			}
		},
		created() {
      this.getBannerData();
      this.getPhraseData();
      this.getCategoryData();
      this.getListData();
		},
		methods: {
      /**
       * 获取需求列表广告数据
       */
      getBannerData: function() {
        request.httpRequest('advertising/select', {position__title: 'demand_list_banner', limit: 4}).then(res => {
          this.bannerList = res;
        });
      },

			/**
       * 获取需求列表短语数据
       */
      getPhraseData: function() {
        request.httpRequest('business/phrase/data', {title: 'demand'}).then(res => {
          this.phraseList = res;
        });
      },
		}
	}
</script>

<style lang="scss" scoped>
  @import '@/static/scss/common.scss';
</style>
